import { useState, useEffect } from 'react'
import '../../assets/css/projectMange.css'
import '../../assets/css/tree.css'
import {
  Tooltip,
  Tag,
  Button,
  Modal,
  Input,
  message,
  Divider,
  Table,
  Select,
  Tree
} from 'antd'
import {
  RightOutlined,
  CloseCircleOutlined,
  FormOutlined,

} from '@ant-design/icons'
import { getProList, addPro, upDatePro, joinPro, delPro, getProDetail, updateName, getProPeo, updatePeoName, delPeo, addPeo, changeAdmin } from '../../api/projectMange'
export default function ProjectMange() {
  // 所有项目
  let [projects, setProjects] = useState([])
  // 我负责的项目
  let [myprojects, setMyprojects] = useState([])
  // 我加入的项目
  let [joinprojects, setJoinprojects] = useState([])
  // 是否显示新建项目
  let [isShownewpro, setIsShownewpro] = useState(false)
  // 是否显示提示框
  let [isModalOpen, setIsModalOpen] = useState(false)
  // 是否显示项目详情
  let [showDetail, setShowDetail] = useState(false)
  // 项目名
  let [proName, setProName] = useState('')
  // 招商状态
  let [attract, setAttract] = useState(false)
  // 运营状态
  let [operate, setOperate] = useState(false)
  // 项目管理员
  let [proAdmin, setProAdmin] = useState("")
  // 项目创建时间
  let [createDate, setCreateDate] = useState("")
  // 添加项目人员手机号
  let [addPeoPhone, setAddPeoPhone] = useState("")
  // 添加项目人员名字
  let [addPeoName, setAddPeoName] = useState("")
  // 是否可以修改项目名称
  let [proNameipt, setProNameipt] = useState(true)
  // 是否可以修改项目成员姓名
  let [proPeoNameipt, setProPeoNameipt] = useState(true)
  // 是否显示删除项目成员模态框
  let [isdelPeoOpen, setIsdelPeoOpen] = useState(false)
  // 是否显示添加项目成员模态框
  let [isAddPeo, setIsAddPeo] = useState(false)
  // 是否显示项目转让模态框
  let [prozhuan, setProzhuan] = useState(false)
  // 是否显示权限配置
  let [showQuanxian, setShowQuanxian] = useState(false)
  // 项目成员列表
  let [proPeoList, setProPeoList] = useState([])
  // 当前项目成员的id
  let [currPeoId, setCurrPeoId] = useState(0)
  // 修改的项目成员姓名
  let [proPeoName, setProPeoName] = useState()
  // 是否展示人员管理
  let [peoMange, setPeoMange] = useState(false)
  // 当前编辑项目的id
  let [currId, setCurrID] = useState(null)

  // 项目人员表格列信息
  let peoColumns = [
    {
      title: '登录账号',
      dataIndex: 'loginPhone',
      key: 'loginPhone',
    },
    {
      title: '备注姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '项目加入时间',
      dataIndex: 'joinDate',
      key: 'joinDate',
    },
  ]
  // 项目人员管理表格列信息
  let peoMangeColumns = [
    {
      title: '登录账号',
      dataIndex: 'loginPhone',
      key: 'loginPhone',
      render: (item, row) => {
        return (
          <div style={{
            display: 'flex'
          }}>
            <span>{item}</span>
            {row.jurisdiction == '管理员' && <span style={{
              background: '#F1EFFF',
              borderRadius: 2,
              color: '#8479E3',
              fontSize: 12,
              marginLeft: 5,
              textAlign: 'center',
              userSelect: 'none'
            }}>管理员</span>}
          </div>
        )
      }
    },
    {
      title: '备注姓名',
      dataIndex: 'name',
      key: 'name',
      render: (item, row) => {
        return (
          <>
            {currPeoId !== row.id ? <span>{item}</span> : <input type="text"
              style={{
                width: 58,
                height: 24,
                border: '1px solid #8479E3',
                boxShadow: '0 2px 6px 0 rgba(132,121,227,0.15)',
                borderRadius: 1,
                marginRight: 10,
                background: 'transparent',
                outline: 'none'
              }}
              value={proPeoName}
              onChange={(e) => { setProPeoName(e.target.value) }}
            />}
            {currPeoId !== row.id ?
              <FormOutlined onClick={() => {
                console.log(1231231234123);
                let id = row.id
                console.log(id);
                setCurrPeoId(id)
                setProPeoName(item)
                console.log(proName);

                console.log(currId);
              }} />
              : <span style={{
                color: '#fff',
                background: '#8479E3',
                fontSize: 12,
                padding: 5,
                userSelect: 'none',
                cursor: 'pointer'
              }}
                onClick={() => {
                  setCurrPeoId(0)
                  updatePeoName({
                    id: currPeoId,
                    name: proPeoName
                  })
                  getProPeo().then(res => {
                    setPeoData(res.data.data)
                  })
                }}
              >保存</span>}
          </>
        )
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作',
      dataIndex: 'caozuo',
      key: 'caozuo',
      render: (item, row) => {
        return (
          <div>
            {row.status == '正常' ? null : row.status == '未激活' ? <span style={{
              color: '#8479E3',
              fontSize: 14,
              cursor: 'pointer'
            }}
              onClick={() => {
                setShowQuanxian(true)
              }}
            >权限</span> : <span style={{
              color: '#dcdcdc',
              fontSize: 14,
            }}>权限</span>}
            {row.status !== '正常' ? <span style={{
              fontSize: 14,
              color: '#ee6723',
              cursor: 'pointer',
              marginLeft: 20
            }}
              onClick={() => {
                setCurrID(row.id)
                setIsdelPeoOpen(true)
              }}
            >删除</span> : null}
          </div>
        )
      }
    },
  ]
  // 项目人员表格数据
  let [peoData, setPeoData] = useState([])
  useEffect(() => {
    getProList().then(res => {
      setProjects(res.data.data)
    })
    getProPeo().then(res => {
      console.log(res);
      let list = res.data.data.map(item => {
        return {
          "label": item.name,
          "value": item.name
        }
      })
      setProPeoList(list)
      console.log(proPeoList);
    })
  }, [])

  useEffect(() => {
    let arr = projects.filter(item => item.isforme == 'true')
    setMyprojects([...arr])
    let arr1 = projects.filter(item => item.isforme !== 'true')
    let arr2 = arr1.filter(item => item.isJoin == '0')
    let arr3 = arr1.filter(item => item.isJoin == '1')
    setJoinprojects([...arr2, ...arr3])
  }, [projects])


  // 当前模态框是新建还是编辑
  let [isEditor, setIsEditor] = useState(false)

  // 模态框保存按钮事件
  const save = () => {
    if (isEditor) {

      upDatePro({
        id: currId,
        proName,
        attract,
        operate
      }).then(() => {
        message.open({
          type: 'success',
          content: '项目保存成功'
        })
        getProList().then(res => {
          setProjects(res.data.data)
        })
        setProName('');
        setAttract(false);
        setOperate(false);
      })
    } else {
      addPro({
        proName,
        attract,
        operate
      }).then(
        () => {
          setProName('');
          setAttract(false);
          setOperate(false);
          getProList().then(res => {
            setProjects(res.data.data)
          })
          message.open({
            type: 'success',
            content: '项目新建成功'
          })
        }
      )

    }

    setIsShownewpro(false)
  }
  // 编辑项目
  const editor = (obj) => {
    setIsEditor(true)
    setProName(obj.proName);
    setAttract(obj.attract)
    setOperate(obj.operate)

    setCurrID(obj.id)
    setIsShownewpro(true)

  }

  // 权限相关
  const { TreeNode } = Tree;
  let treeData = [
    {
      title: '项目',
      key: '1',
      children: [
        {
          title: '人员管理',
          key: '1-1',
          isLeaf: true
        }
      ]
    },
    {
      title: '客户',
      key: '2',
      children: [
        {
          title: '新建',
          key: '2-1',
          isLeaf: true
        },
        {
          title: '编辑',
          key: '2-2',
          isLeaf: true
        },
        {
          title: '查看',
          key: '2-3',
          isLeaf: true
        },
        {
          title: '删除',
          key: '2-4',
          isLeaf: true
        }
      ]
    },
    {
      title: '资产',
      key: '3',
      children: [
        {
          title: '楼宇',
          key: '3-1',
          isLeaf: true,
          children: [
            {
              title: '新建',
              key: '3-1-1',
              isLeaf: true
            },
            {
              title: '编辑',
              key: '3-1-2',
              isLeaf: true
            },
            {
              title: '查看',
              key: '3-1-3',
              isLeaf: true
            },
            {
              title: '删除',
              key: '3-1-4',
              isLeaf: true
            }
          ]
        },
        {
          title: '空间',
          key: '3-2',
          isLeaf: true,
          children: [
            {
              title: '新建',
              key: '3-2-1',
              isLeaf: true
            },
            {
              title: '编辑',
              key: '3-2-2',
              isLeaf: true
            },
            {
              title: '查看',
              key: '3-2-3',
              isLeaf: true
            },
            {
              title: '删除',
              key: '3-2-4',
              isLeaf: true
            },
            {
              title: '上架',
              key: '3-2-5',
              isLeaf: true
            },
            {
              title: '下架',
              key: '3-2-6',
              isLeaf: true
            }
          ]
        }
      ]
    }
  ];
  const renderTreeNodes = (data) =>
    data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} key={item.key} className='leaf-node' />;
    });

  return (
    <div className='qprojectMange'>
      {projects.length
        ?
        <div className='qprojects'>
          {/* 我负责的项目 */}
          <div className="qformePro">
            <div className="qproHeader">
              <h4>我负责的项目</h4>
            </div>
            <div className="qlist">
              {myprojects.map((item, index) => {
                return (
                  <div className="qitem" key={index}>
                    {/* 标题 */}
                    <div className="qpro-title" onClick={(e) => {
                      e.preventDefault()
                      editor(item)
                      console.log(item);

                    }}>{item.proName}
                      <Tooltip title="这是你负责的项目哦"
                      >
                        <img
                          src={new URL('../../assets/images/basicinfo.png', import.meta.url)}
                          style={{
                            width: 12,
                            height: 12,
                            marginLeft: 2
                          }}
                          alt="" />
                      </Tooltip></div>
                    <div className="qpro-tags">
                      {item.attract == '1' ? <Tag bordered={false} color="green">
                        招商
                      </Tag> : null}
                      {item.operate == '1' ? <Tag Tag bordered={false} color="orange">
                        运营
                      </Tag> : null}
                    </div>
                    {/* 人员 */}
                    <div className="qpersonnels">
                      人员({item.peopleNum})<RightOutlined color='#8479E3 ' style={{
                        marginLeft: 4
                      }} />
                    </div>
                    <Button style={{
                      width: 178,
                      height: 30,
                      background: '#8479E3',
                      borderRadius: 2,
                      color: '#fff',
                      fontSize: 12,
                      marginTop: 10
                    }}
                      onClick={() => {
                        getProDetail(item.id).then(res => {
                          setProName(res.data.data[0].proName)
                          setCurrID(res.data.data[0].id)
                          setProAdmin(res.data.data[0].admin)
                          setOperate(res.data.data[0].operate)
                          setAttract(res.data.data[0].attract)
                          setCreateDate(res.data.data[0].createDate)
                        })
                        getProPeo().then(res => {
                          setPeoData(res.data.data)
                        })
                        setShowDetail(true)
                      }}
                    >进入项目</Button>
                  </div>
                )
              })}

              <div className="qNewPro" onClick={() => {
                setIsEditor(false)
                setIsShownewpro(true)
              }}>
                <img src={new URL('../../assets/images/new.png', import.meta.url).href} alt="" />
              </div>
            </div>

          </div>
          {/* 我加入的项目 */}
          <div className="qjoinPro">
            <div className="qproHeader">
              <h4>我加入的项目</h4>
            </div>
            <div className="qlist">
              {joinprojects.map((item, index) => {
                return (
                  <div className="qitem" key={index}>
                    {/* 标题 */}
                    <div className="qpro-title">{item.proName}
                      <Tooltip title="你要加入此项目吗？"
                      >
                        <img
                          src={new URL('../../assets/images/basicinfo.png', import.meta.url)}
                          style={{
                            width: 12,
                            height: 12,
                            marginLeft: 2
                          }}
                          alt="" />
                      </Tooltip></div>
                    <div className="qpro-tags">
                      {item.attract == '1' ? <Tag bordered={false} color="green">
                        招商
                      </Tag> : null}
                      {item.operate == '1' ? <Tag Tag bordered={false} color="orange">
                        运营
                      </Tag> : null}
                    </div>
                    {/* 人员 */}
                    <div className="qpersonnels">
                      人员({item.peopleNum})<RightOutlined color='#8479E3 ' style={{
                        marginLeft: 4
                      }} />
                    </div>
                    {/* 接受或拒绝 */}
                    {item.isJoin == '0' ?
                      <div className="qaccOrrej" >
                        <div className='qaccept' onClick={() => {
                          joinPro(item.id).then(() => {
                            getProList().then(res => {
                              setProjects(res.data.data)
                            })
                          })
                        }}>接受</div>
                        <div className='qreject' onClick={() => {
                          setIsModalOpen(true)
                          setCurrID(item.id)
                        }}>拒绝</div>
                      </div> :
                      <div className="qaccOrrej" >
                        <div className='qaccept' onClick={() => {
                          setCurrID(item.id)
                          setIsModalOpen(true)
                        }}

                        >退出项目</div>
                      </div>
                    }

                  </div>
                )
              })}
            </div>
          </div>
        </div>
        :
        // 没有项目时
        <div className='qEmpty'>
          <div>
            <img src={new URL('../../assets/images/weitu1.jpg', import.meta.url).href} alt="" />
            <p className="qtips">
              还没有您负责的项目，马上<span className='createProject' onClick={() => { setIsShownewpro(true) }}>创建项目</span>
            </p>
          </div>
        </div>
      }
      {/* 新建项目 */}
      <Modal
        title={isEditor ? '修改项目' : '新建项目'}
        open={isShownewpro}
        onCancel={() => setIsShownewpro(false)}
        footer={null}
        width={708}
      >
        <div style={{
          paddingTop: 30,
          borderTop: '1px solid #DBDEE3'
        }}>
          {/* 新建项目内容标题 */}
          <div style={{
            color: '#9b9ea9'
          }}>
            <span style={
              {
                color: '#fa8484',
                marginRight: 6,
                display: 'inline-block'
              }
            }>*</span> 项目名称:
          </div>
          <Input placeholder='请输入'
            style={{
              width: 420,
              height: 36,
              borderRadius: 2,
              background: '#F8FBFF',
              marginTop: 18
            }}
            value={proName}
            onChange={(e) => {
              setProName(e.target.value)
            }}
          ></Input>
          {/* 新建项目内容标题 */}
          <div style={{
            color: '#9b9ea9',
            marginTop: 30,
            marginBottom: 16
          }}>
            <span style={
              {
                color: '#fa8484',
                marginRight: 6,
                display: 'inline-block'
              }
            }>*</span> 开通模块:
          </div>
          {/* 模块列表 */}
          <div style={{
            display: 'flex',
            flexWrap: 'wrap'
          }}>
            {/* 招商 */}
            <div style={{
              width: 213,
              height: 102,
              padding: 16,
              marginRight: 10,
              marginBottom: 10,
              backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
              backgroundSize: 'cover',
            }}>
              <h5 style={{
                fontSize: 16
              }}>招商</h5>
              {/* tags */}
              <div style={{
                fontSize: 12,
                color: '##8b8b91',

              }}>
                空间定价 | 租控 | 租约
              </div>
              {/* 按钮 */}

              <Button style={{
                width: 116,
                height: 24,
                backgroundColor: '#75C476',
                marginTop: 12,
                borderRadius: 2,
                border: '1px solid #75C476',
                fontSize: 12,
                background: attract == '1' ? 'transparent' : '#75C476',
                color: attract == '1' ? '#75C476' : '#fff'
              }}
                onClick={() => {
                  setAttract(attract == '1' ? '0' : '1')
                  console.log(123);

                }}
              >{attract ? '已开通' : '开通'}</Button>
            </div>
            {/* 运营 */}
            <div style={{
              width: 213,
              height: 102,
              padding: 16,
              marginRight: 10,
              marginBottom: 10,
              backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
              backgroundSize: 'cover',
            }}>
              <h5 style={{
                fontSize: 16
              }}>运营</h5>
              {/* tags */}
              <div style={{
                fontSize: 12,
                color: '##8b8b91',

              }}>
                公告 | 服务保修 | 投诉建议
              </div>
              {/* 按钮 */}
              <Button style={{
                width: 116,
                height: 24,
                backgroundColor: '#75C476',
                marginTop: 12,
                borderRadius: 2,
                border: '1px solid #75C476',
                fontSize: 12,
                background: operate == '1' ? 'transparent' : '#75C476',
                color: operate == '1' ? '#75C476' : '#fff'
              }}
                onClick={() => {
                  console.log(operate);

                  setOperate(operate == '1' ? '0' : '1')

                }}
              >{operate ? '已开通' : '开通'}</Button>
            </div>
            {/* 社区 */}
            <div style={{
              width: 213,
              height: 102,
              padding: 16,
              marginRight: 0,
              marginBottom: 10,
              backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
              backgroundSize: 'cover',
            }}>
              <h5 style={{
                fontSize: 16
              }}>社区</h5>
              {/* tags */}
              <div style={{
                fontSize: 12,
                color: '##8b8b91',

              }}>
                即将上线~
              </div>

            </div>
            {/* 设备设施 */}
            <div style={{
              width: 213,
              height: 102,
              padding: 16,
              marginRight: 10,
              backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
              backgroundSize: 'cover',
            }}>
              <h5 style={{
                fontSize: 16
              }}>设备设施</h5>
              {/* tags */}
              <div style={{
                fontSize: 12,
                color: '##8b8b91',

              }}>
                即将上线~
              </div>

            </div>
            {/* 增值服务 */}
            <div style={{
              width: 213,
              height: 102,
              padding: 16,
              marginRight: 10,
              backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
              backgroundSize: 'cover',
            }}>
              <h5 style={{
                fontSize: 16
              }}>增值服务</h5>
              {/* tags */}
              <div style={{
                fontSize: 12,
                color: '##8b8b91',

              }}>
                即将上线~
              </div>

            </div>
            {/* 数据 */}
            <div style={{
              width: 213,
              height: 102,
              padding: 16,
              marginRight: 0,
              backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
              backgroundSize: 'cover',
            }}>
              <h5 style={{
                fontSize: 16
              }}>数据</h5>
              {/* tags */}
              <div style={{
                fontSize: 12,
                color: '##8b8b91',

              }}>
                即将上线~
              </div>

            </div>
          </div>
          <Button style={{
            width: 120,
            height: 36,
            display: 'block',
            margin: '20px auto 0',
            background: '#8479e3',
            color: '#fff',
            fontSize: 14
          }} onClick={() => {
            save()
          }}>保存</Button>
        </div>
      </Modal>
      {/* 删除项目模态框 */}
      <Modal title="" open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        footer={null}
        width={308}
      >
        <div style={{
          paddingTop: 30,
          textAlign: 'center',
          fontSize: 14,
          color: '#000'
        }}>
          <p>此操作是不可恢复的！
          </p>
          <p> 您确认要执行此删除操作吗?</p>
          <div style={{
            marginTop: 20
          }}>
            <Button style={{
              width: 120,
              height: 32,
              background: '#8479e3',
              color: '#fff',
              marginRight: 20
            }}
              onClick={() => {
                delPro(currId).then(() => {

                  getProList().then(res => {
                    setProjects(res.data.data)
                    setIsModalOpen(false)
                    setShowDetail(false)
                  })

                })

              }}
            >确定</Button>
            <Button style={{
              width: 120,
              height: 32,
              background: '#f0f1f9'
            }}
              onClick={() => [
                setIsModalOpen(false)
              ]}
            >取消</Button>
          </div>
        </div>
      </Modal>
      {/* 删除项目成员模态框 */}
      <Modal title="" open={isdelPeoOpen}
        onCancel={() => setIsdelPeoOpen(false)}
        footer={null}
        width={308}
      >
        <div style={{
          paddingTop: 30,
          textAlign: 'center',
          fontSize: 14,
          color: '#000'
        }}>
          <p>此操作是不可恢复的！
          </p>
          <p> 您确认要执行此删除操作吗?</p>
          <div style={{
            marginTop: 20
          }}>
            <Button style={{
              width: 120,
              height: 32,
              background: '#8479e3',
              color: '#fff',
              marginRight: 20
            }}
              onClick={() => {
                delPeo(currPeoId)
                getProPeo().then(res => {
                  setPeoData(res.data.data)
                })
              }}
            >确定</Button>
            <Button style={{
              width: 120,
              height: 32,
              background: '#f0f1f9'
            }}
              onClick={() => [
                setIsModalOpen(false)
              ]}
            >取消</Button>
          </div>
        </div>
      </Modal>
      {/* 项目详情 */}
      {showDetail &&
        <div className="qproDetailMask"
          onClick={(e) => {
            e.stopPropagation()
            setShowDetail(false)
            getProList().then(res => {
              setProjects(res.data.data)
            })
          }}>
          <CloseCircleOutlined style={{
            position: 'absolute',
            right: '730px',
            top: '10px',
            zIndex: 100,
            fontSize: 30,
            color: '#fff'
          }} />
          <div className="qproDetail" onClick={(e) => {
            e.stopPropagation()
          }}
          >
            <div className="qdetailHeader" onClick={() => {
              setProNameipt(true)
              updateName({
                id: currId,
                proName
              })
            }}>
              <div className="qipt" style={{
                display: 'flex',
                alignItems: 'center'
              }}>
                <div>
                  <input type="text"
                    disabled={proNameipt}
                    style={proNameipt ? {} : { borderBottom: '1px solid #A0A0A0' }}
                    value={proName}
                    onClick={(e) => {
                      e.stopPropagation()
                    }}
                    onChange={(e) => {
                      setProName(e.target.value)
                    }}
                    className='clientNameipt' />
                  <FormOutlined style={{
                    fontSize: 18,
                    color: '#A0A0A0',
                    cursor: 'pointer',
                    marginLeft: 10
                  }}
                    onClick={(e) => {
                      e.stopPropagation()
                      setProNameipt(false)
                    }}
                  /></div>
              </div>
              <div style={{
                height: '100%',
                display: 'flex',
                alignItems: 'center'
              }}>
                {/* 转让 */}
                <div className="zhuanr" style={{
                  color: '#8479E3',
                  fontSize: 14,
                  marginRight: 15,
                  userSelect: 'none',
                  cursor: 'pointer'
                }}
                  onClick={() => {
                    setProzhuan(true)
                  }}
                >
                  转让
                </div>
                <div className="qdel" onClick={(e) => {
                  e.stopPropagation()
                  setIsModalOpen(true)
                }}>
                  删除
                </div>
              </div>
            </div>
            <Divider />
            {/* 基础信息 */}
            <div className="qbasecInfo">
              <div className="qtitle">
                基础信息
              </div>
              <div className="qcontent" >
                <div>
                  <div className='qcon-title'>项目管理员</div>
                  <div className='qcon-text'>{proAdmin}</div>
                </div>
                <div>
                  <div className='qcon-title'>项目创建时间</div>
                  <div className='qcon-text'>{createDate}</div>
                </div>
              </div>
            </div>
            <Divider />
            {/* 项目人员 */}
            <div className="proPeo">
              <div className="qheader">
                <div className="title">项目人员</div>
                <div className="editor" onClick={() => {
                  setPeoMange(true)
                }}>管理</div>
              </div>
              <Table columns={peoColumns} dataSource={peoData} />
            </div>
            {/* 项目模块 */}
            <div className="qmoduleList">
              <div className="qheader">
                <div className="title">项目模块</div>
              </div>
              <div style={{
                display: 'flex',
                flexWrap: 'wrap'
              }}>
                {/* 招商 */}
                <div style={{
                  width: 213,
                  height: 102,
                  padding: 16,
                  marginRight: 10,
                  marginBottom: 10,
                  backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
                  backgroundSize: 'cover',
                }}>
                  <h5 style={{
                    fontSize: 16
                  }}>招商</h5>
                  {/* tags */}
                  <div style={{
                    fontSize: 12,
                    color: '##8b8b91',

                  }}>
                    空间定价 | 租控 | 租约
                  </div>
                  {/* 按钮 */}

                  <Button style={{
                    width: 116,
                    height: 24,
                    backgroundColor: '#75C476',
                    marginTop: 12,
                    borderRadius: 2,
                    border: '1px solid #75C476',
                    fontSize: 12,
                    background: attract == '1' ? 'transparent' : '#75C476',
                    color: attract == '1' ? '#75C476' : '#fff'
                  }}
                    onClick={() => {
                      setAttract(attract == '1' ? '0' : '1')
                      console.log(123);

                    }}
                  >{attract ? '已开通' : '开通'}</Button>
                </div>
                {/* 运营 */}
                <div style={{
                  width: 213,
                  height: 102,
                  padding: 16,
                  marginRight: 10,
                  marginBottom: 10,
                  backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
                  backgroundSize: 'cover',
                }}>
                  <h5 style={{
                    fontSize: 16
                  }}>运营</h5>
                  {/* tags */}
                  <div style={{
                    fontSize: 12,
                    color: '##8b8b91',

                  }}>
                    公告 | 服务保修 | 投诉建议
                  </div>
                  {/* 按钮 */}
                  <Button style={{
                    width: 116,
                    height: 24,
                    backgroundColor: '#75C476',
                    marginTop: 12,
                    borderRadius: 2,
                    border: '1px solid #75C476',
                    fontSize: 12,
                    background: operate == '1' ? 'transparent' : '#75C476',
                    color: operate == '1' ? '#75C476' : '#fff'
                  }}
                    onClick={() => {
                      console.log(operate);

                      setOperate(operate == '1' ? '0' : '1')

                    }}
                  >{operate ? '已开通' : '开通'}</Button>
                </div>
                {/* 社区 */}
                <div style={{
                  width: 213,
                  height: 102,
                  padding: 16,
                  marginRight: 0,
                  marginBottom: 10,
                  backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
                  backgroundSize: 'cover',
                }}>
                  <h5 style={{
                    fontSize: 16
                  }}>社区</h5>
                  {/* tags */}
                  <div style={{
                    fontSize: 12,
                    color: '##8b8b91',

                  }}>
                    即将上线~
                  </div>

                </div>
                {/* 设备设施 */}
                <div style={{
                  width: 213,
                  height: 102,
                  padding: 16,
                  marginRight: 10,
                  backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
                  backgroundSize: 'cover',
                }}>
                  <h5 style={{
                    fontSize: 16
                  }}>设备设施</h5>
                  {/* tags */}
                  <div style={{
                    fontSize: 12,
                    color: '##8b8b91',

                  }}>
                    即将上线~
                  </div>

                </div>
                {/* 增值服务 */}
                <div style={{
                  width: 213,
                  height: 102,
                  padding: 16,
                  marginRight: 10,
                  backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
                  backgroundSize: 'cover',
                }}>
                  <h5 style={{
                    fontSize: 16
                  }}>增值服务</h5>
                  {/* tags */}
                  <div style={{
                    fontSize: 12,
                    color: '##8b8b91',

                  }}>
                    即将上线~
                  </div>

                </div>
                {/* 数据 */}
                <div style={{
                  width: 213,
                  height: 102,
                  padding: 16,
                  marginRight: 0,
                  backgroundImage: `url(${new URL('../../assets/images/bg.png', import.meta.url).href})`,
                  backgroundSize: 'cover',
                }}>
                  <h5 style={{
                    fontSize: 16
                  }}>数据</h5>
                  {/* tags */}
                  <div style={{
                    fontSize: 12,
                    color: '##8b8b91',

                  }}>
                    即将上线~
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      }
      {/* 人员管理 */}
      {peoMange &&
        <div className="qproDetailMask" onClick={(e) => {
          e.stopPropagation()
          setPeoMange(false)
        }}>
          <div className="qproDetail" onClick={(e) => {
            e.stopPropagation()
          }}>

            <div className="qheader" onClick={(e) => {
              e.stopPropagation()
            }}>
              <div className="title">人员管理</div>
              <div className="editor" onClick={() => {
                setIsAddPeo(true)
              }}>配置人员</div>
            </div>
            <Table columns={peoMangeColumns} dataSource={peoData} />
          </div>
        </div>}
      {/* 添加人员 */}
      <Modal
        title="添加人员"
        open={isAddPeo}
        onCancel={() => setIsAddPeo(false)}
        footer={null}
      >
        <Divider />
        <div >
          <div className="title require">
            登录账号
          </div>
          <div>
            <Select
              style={{
                width: 96,
                height: 36,
                marginRight: 10
              }}
              options={[
                { value: '中国+86', label: '中国+86' },
                { value: '中国+87', label: '中国+87' },
              ]}
              defaultValue={['中国+86']}
            >

            </Select>
            <Input
              style={{
                width: 286,
                height: 36,
                border: '1px solid #E1E8EE',
                borderRadius: 2
              }}
              placeholder='请输入'
              value={addPeoPhone}
              onChange={(e) => {
                setAddPeoPhone(e.target.value)
              }}
            />
          </div>
        </div>
        <div style={{
          marginTop: 20
        }}>
          <div className="title require">
            备注姓名
          </div>
          <div>
            <Input
              style={{
                height: 36,
                border: '1px solid #E1E8EE',
                borderRadius: 2
              }}
              placeholder='请输入'
              value={addPeoName}
              onChange={(e) => {
                setAddPeoName(e.target.value)
              }}
            />
          </div>
        </div>
        <div style={{
          width: "100%",
          display: 'flex',
          justifyContent: 'center'
        }}>
          <Button style={{
            background: '#8479E3',
            fontSize: 14,
            color: '#fff',
            width: 392,
            height: 36,
            marginTop: 20,
            borderRadius: 4
          }}
            onClick={() => {
              addPeo({
                loginPhone: addPeoPhone,
                name: addPeoName
              })
              getProPeo().then(res => {
                setPeoData(res.data.data)
                setIsAddPeo(false)
                setAddPeoName("")
                setAddPeoName("")
              })
            }}
          >保存</Button>
        </div>
      </Modal>
      {/* 项目转让 */}
      <Modal
        title="项目转让"
        open={prozhuan}
        onCancel={() => setProzhuan(false)}
        footer={null}
      >
        <Divider />

        <div style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center'
        }}>
          <Select
            placeholder="项目接收人"
            value={proAdmin}
            onChange={(e) => {
              setProAdmin(e)
            }}
            options={proPeoList}
            style={{
              width: 392,
              height: 36
            }}
          />
          <Button style={{
            width: 392,
            height: 36,
            borderRadius: 4,
            marginTop: 20
          }}
            onClick={() => {
              changeAdmin({
                id: currId,
                admin: proAdmin
              }).then(() => {
                message.open({
                  type: 'success',
                  content: '项目转让成功'
                })
                setProzhuan(false)
              })
            }}
          >保存{currId}</Button>
        </div>
      </Modal>
      {/* 权限管理 */}
      <Modal
        title="权限配置"
        open={showQuanxian}
        onCancel={() => setShowQuanxian(false)}
        footer={null}
        width={600}
      >
        <Divider />
        <Tree
          multiple={true}
          checkable
        >{renderTreeNodes(treeData)}</Tree>
      </Modal>
    </div >
  )
}
